<template>
    <el-form :model="activity">
        <el-form-item label="负责人">
            <el-select v-model="activity.ownerId" placeholder="请选择负责人" @click="loadOwner" clearable>
                <el-option v-for="item in ownerOptions" :label="item.name" :value="item.id" :key="item.id" />
            </el-select>
        </el-form-item>

        <el-form-item label="活动名称">
            <el-input v-model="activity.name" placeholder="请输入活动名称" clearable />
        </el-form-item>

        <el-form-item label="活动时间">
            <el-date-picker v-model="activity.activityTime" type="datetimerange" start-placeholder="开始时间"
                end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" data-format="YYYY-MM-DD" time-format="HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss" clearable />
        </el-form-item>

        <el-form-item label="活动预算">
            <el-input v-model="activity.cost" placeholder="请输入活动预算" clearable />
        </el-form-item>
        <el-form-item label="创建时间">
            <el-date-picker v-model="activity.createTime" type="datetime" placeholder="请输入创建时间"
                value-format="YYYY-MM-DD HH:mm:ss" clearable />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSearch">搜索</el-button>
            <el-button type="primary" plain>重置</el-button>
        </el-form-item>
    </el-form>

    <el-button type="primary">录入市场活动</el-button>
    <el-button type="danger">批量删除</el-button>

    <el-table :data="activityPageInfo.list">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column property="ownerDo.name" label="负责人" />
        <el-table-column property="name" label="活动名称" />
        <el-table-column property="startTime" label="开始时间" />
        <el-table-column property="endTime" label="结束时间" />
        <el-table-column property="cost" label="活动预算" />
        <el-table-column property="createTime" label="创建时间" show-overflow-tooltip />
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="success" :icon="Check" circle @click="view(scope.row.id)" />
                <el-button type="primary" :icon="Edit" circle @click="edit(scope.row.id)" />
                <el-button type="danger" :icon="Delete" circle @click="del(scope.row.id)" />
            </template>
        </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next, jumper, total" :total="activityPageInfo.total"
        :page-size="activityPageInfo.pageSize" @change="toPage" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { doGet } from '../http/httpRequest'
import { showMessage } from '../util/message'
import { useRouter } from 'vue-router'

//活动对象
const activity = ref({})

//负责人对象
const ownerOptions = ref([{}])

//查询负责人信息
const loadOwner = () => {
    doGet('api/owners', {}).then(res => {
        if (res.data.code == 200) {
            ownerOptions.value = res.data.info
        } else {
            showMessage(res.data.msg, 'error')
        }
    })
}

//活动分页对象
const activityPageInfo = ref({})

//查询活动分页信息
const loadActivityList = async current => {

    //处理活动开始和结束时间
    let timeArray = []

    let activityTime = activity.value.activityTime

    for (let index in activityTime) {
        timeArray.push(activityTime[index])
    }
    const resp = await doGet('/api/activity', {
        current: current,
        ownerId: activity.value.ownerId,
        activityName: activity.value.name,
        startTime: timeArray[0],
        endTime: timeArray[1],
        cost: activity.value.cost,
        createTime: activity.value.createTime,
    })

    if (resp.data.code == 200) {
        activityPageInfo.value = resp.data.info
    } else {
        showMessage(resp.data.msg, 'error')
    }

    // doGet('/api/activity',{current}).then(res => {
    //     if (res.data.code == 200) {
    //         activityPageInfo.value = res.data.info
    //     } else {
    //         showMessage(res.data.msg, 'error')
    //     }
    // })
}

//页面挂载后执行查询活动分页信息
onMounted(() => {
    loadActivityList(1)
})

//分页函数
const toPage = current => {
    loadActivityList(current)
}


//搜索
const onSearch = () => {
    loadActivityList(1)
}


let router = useRouter()

//跳转到明细
const view = id => {
    router.push('/dashboard/activity/' + id)
}

</script>

<style scoped></style>